<template>
    <div class="index_container__pOVDp margin-t" element-loading-text="数据加载中">
        <ul class="index_tabsNav___H_94"><a href="/article">
                <li class="index_active__1x0Kq">全部</li>
            </a></ul>
        <div class="index_articleListWrapper__gfxr8">
            <div class="index_articleList__tWiD3">
                <ul>
                    <li v-for="item in newsData" :key="item.id">
                        <div class="index_item__VizbC" >
                            <div class="index_itemImg__Ty3XC"><a :title="item.name"><img
                                        :src="item.image" :alt="item.name"></a>
                                <div class="index_itemImgDes__JMjb8" :title="item.name" v-text="item.name"></div>
                            </div>
                            <div class="index_itemContent__vdhzX">
                                <h2 class="index_itemTitle__srbn3" @click="clickItem(item.id)"><a v-text="item.name"></a>
                                </h2>
                                <div class="index_itemExcerpt__Lj3te">
                                    <p v-html="item.context"></p>
                                </div>
                                <div class="index_itemMeta__l_gaX">
                                    <span v-text="item.createTime"></span>
                                    <span class="index_pageView__djDrK">
                                        <span role="img" class="anticon">
                                            <svg class="" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                                                width="1em" height="1em" fill="currentColor" aria-hidden="true"
                                                focusable="false">
                                                <path
                                                    d="M512.173 795c171.39 0 318.422-118.888 356.196-283.157C830.477 347.727 683.517 229 512.245 229c-171.39 0-318.422 118.888-356.197 283.157C193.941 676.273 340.9 795 512.173 795zM75.93 504.096C118.297 298.658 299.91 149 512.245 149c212.19 0 393.717 149.458 436.234 354.712a40 40 0 0 1 .007 16.192C906.121 725.342 724.507 875 512.173 875c-212.191 0-393.718-149.458-436.235-354.712a40 40 0 0 1-.007-16.192zM512 704c-106.039 0-192-85.961-192-192s85.961-192 192-192 192 85.961 192 192-85.961 192-192 192zm0-80c61.856 0 112-50.144 112-112s-50.144-112-112-112-112 50.144-112 112 50.144 112 112 112z"
                                                    fill="#7a7a7a"></path>
                                            </svg></span> </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="center-div" style="">
                    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage"
                        @current-change="handelCurrentChange" :total="total" />
                </div>
            </div>
            <div class="index_articleRec__LaNJG">
                <div class="index_widget__gspQW index_widget_recent__24nWU">
                    <h3>近期活动</h3>
                    <ul>
                        <li v-for="item in newsData" :key="item.id"><a rel="" @click="clickItem(item.id)" v-text="item.name"></a></li>

                    </ul>
                </div>
                <div class="index_widget__gspQW index_widget_recent__24nWU">
                    <h3>热门活动</h3>
                    <ul>
                        <li v-for="item in hotNewsData" :key="item.id"><a rel="" @click="clickItem(item.id)" v-text="item.name"></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { newsListApi, hotNewsApi } from '@/api/activi'
import type { ActiviModel, HotActiviModelParam } from '@/api/activi'
const newsData = ref<ActiviModel[]>([{ id: '', name: '', context: '', createTime: '', image: '' }]);
    const currentPage = ref<number>(1)
const newParam = ref<HotActiviModelParam>({ pageNum: currentPage.value, pageSize: 10, type: 0, hotspot: '' });
const hotNewsParam = ref<HotActiviModelParam>({
    pageNum: 1,
    pageSize: 5,
    hotspot: 1,
    type: 0
})
const hotNewsData = ref<ActiviModel[]>([{ id: '', name: '', context: '', createTime: '', image: '' }]);


onMounted(async () => {
    getNewsList()
    const response = await hotNewsApi(hotNewsParam.value)
    if (response.code === 200) {
        hotNewsData.value = response.data?.records ?? []
    }
})
const total = ref<number>(0)
async function getNewsList() {
    const res = await newsListApi(newParam.value)
    if (res.code == 200) {
        newsData.value = res.data?.records ?? []
        total.value = res.data?.total ?? 0
        currentPage.value = res.data?.current ?? 1
    }
}


function handelCurrentChange(pageNum: number) {
    newParam.value.pageNum = pageNum
    getNewsList()
}

const router=useRouter()

function clickItem(id:number){
    router.push(`/newItem/${id}`)
}

</script>
<style scoped lang='less'>
.center-div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;

    :deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #F9B469
    }
}

.index_container__pOVDp {
    width: 1250px;
    margin: 0 auto;
    padding: 15px 0;
}

.index_container__pOVDp .index_tabsNav___H_94 {
    display: flex;
    align-items: center;
    font-size: 16px;
    background-color: #fff;
    margin-bottom: 15px;
    padding: 0 20px;
}

.index_container__pOVDp .index_tabsNav___H_94>a {
    color: #333;
}

.index_container__pOVDp .index_tabsNav___H_94>a li {
    margin-right: 20px;
    height: 50px;
    line-height: 50px;
}

.index_container__pOVDp .index_tabsNav___H_94>a .index_active__1x0Kq {
    border-bottom: 3px solid #2d5bf7;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 {
    background-color: #fff;
    width: 860px;
}

ul li {
    list-style: none;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_item__VizbC:last-child {
    border-bottom: none;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_item__VizbC {
    display: flex;
    flex-wrap: nowrap;
    padding: 20px;
    border-bottom: 1px solid rgba(39, 39, 39, .07);
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemImg__Ty3XC {
    width: 246px;
    min-width: 246px;
    height: 157px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

a {
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemImg__Ty3XC img {
    width: 100%;
    min-height: 157px;
    height: auto;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemImg__Ty3XC .index_itemImgDes__JMjb8 {
    position: absolute;
    top: calc(50% - 15px);
    width: 100%;
    height: 30px;
    background-color: #00000080;
    color: #fff;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX {
    padding-left: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemTitle__srbn3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemTitle__srbn3 a {
    text-decoration: none;
    color: #333;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemExcerpt__Lj3te {
    font-size: 16px;
    max-height: 52px;
    margin-bottom: 15px;
    line-height: 1.625;
    color: #252525cc;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemExcerpt__Lj3te>p {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemMeta__l_gaX {
    display: flex;
    width: 100%;
    padding-right: 20px;
    justify-content: space-between;
    font-size: 12px;
    line-height: 24px;
    color: #26262699;
    position: absolute;
    bottom: 0;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemMeta__l_gaX .index_pageView__djDrK {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemMeta__l_gaX .index_pageView__djDrK .anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleList__tWiD3 .index_itemContent__vdhzX .index_itemMeta__l_gaX .index_pageView__djDrK .index_num__gyvbc {
    font-size: 12px;
    margin-left: 3px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG {
    width: 365px;
    display: flex;
    flex-direction: column;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW {
    padding: 15px;
    background-color: #fff;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget_recent__24nWU {
    margin-bottom: 15px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW h3 {
    position: relative;
    margin: 2px 0 15px;
    padding: 0 0 0 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW h3:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #2d5bf7;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .15), transparent);
    border-radius: 3px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li {
    position: relative;
    padding: 5px 0 14px 12px;
    line-height: 1.46;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li:before {
    position: absolute;
    left: 0;
    top: 11px;
    content: "";
    width: 0;
    height: 0;
    line-height: 0;
    border: 4px solid transparent;
    border-left: 5px solid #d4d4d4;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li a {
    color: #252525cc;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW {
    padding: 15px;
    background-color: #fff;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget_recent__24nWU {
    margin-bottom: 15px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW h3 {
    position: relative;
    margin: 2px 0 15px;
    padding: 0 0 0 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW h3:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #2d5bf7;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .15), transparent);
    border-radius: 3px;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li {
    position: relative;
    padding: 5px 0 14px 12px;
    line-height: 1.46;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li:before {
    position: absolute;
    left: 0;
    top: 11px;
    content: "";
    width: 0;
    height: 0;
    line-height: 0;
    border: 4px solid transparent;
    border-left: 5px solid #d4d4d4;
}

.index_container__pOVDp .index_articleListWrapper__gfxr8 .index_articleRec__LaNJG .index_widget__gspQW li a {
    color: #252525cc;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>@/api/activi@/api/activi